<template>
    <div class="drawer">
        <el-drawer v-model="userStore.drawerIsShow" :with-header="false">
            <div class="title">{{ userStore.drawerTitle }}</div>
            <el-form ref="ruleFormRef" :model="userStore.drawerUser" label-width="auto" style="max-width: 600px"
                :rules="rules">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userStore.drawerUser.name" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input-number v-model="userStore.drawerUser.age" :min="1" :max="100" />
                </el-form-item>
                <el-form-item label="等级">
                    <el-radio-group v-model="userStore.drawerUser.status">
                        <el-radio :value="1" size="large">普通用户</el-radio>
                        <el-radio :value="2" size="large">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userStore.drawerUser.email" style="width: 240px" placeholder="请输入邮箱" />
                </el-form-item>
            </el-form>
            <template #footer>
                <button class="save" @click="saveEditUser">确定</button>
                <button class="cancel" @click="cancelEditUser">取消</button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '../../store';
import { ElMessage } from 'element-plus'
const userStore = useUserStore();
// 获取表单实例
const ruleFormRef = ref();

// 添加表单校验规则
const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度应在三到五个字符之间', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                if (value && !emailReg.test(value)) {
                    callback(new Error('请输入正确的邮箱格式'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
}

// 保存编辑
const saveEditUser = () => {
    // 表单校验
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            // 判断当前是编辑页面还是添加页面
            if (userStore.drawerTitle == '编辑用户') {
                userStore.saveEditUser(1)
                ElMessage({
                    message: '编辑信息成功',
                    type: 'success',
                })
            } else {
                userStore.saveEditUser(2)
                ElMessage({
                    message: '添加用户成功',
                    type: 'success',
                })
            }
        }
    })
}

// 取消编辑
const cancelEditUser = () => {
    userStore.drawerIsShow = false
    if (userStore.drawerTitle == '编辑用户') {
        ElMessage({
            message: '取消编辑',
            type: 'error',
        })
    } else {
        ElMessage({
            message: '取消添加用户',
            type: 'error',
        })
    }
}
</script>

<style lang="scss" scoped>
.drawer {
    .title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 20px 0;
    }

    .el-form-item {
        display: flex;
        align-items: center;
    }

    button {
        padding: 10px 22px;
        // border: 1px solid #ccc;
        border-radius: 5px;
        margin-left: 15px;
    }

    .save {
        &:hover {
            color: #fff;
            background-color: #79bbff;
        }
    }

    .cancel {
        &:hover {
            color: #fff;
            background-color: #f89898;
        }
    }
}
</style>